﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZRender">
    <meta name="author" content="kener.linfeng@gmail.com">

    <link href="asset/css/bootstrap.css" rel="stylesheet">
    <link href="asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="asset/css/zrenderHome.css" rel="stylesheet">
    <link rel="shortcut icon" href="asset/ico/favicon.png">
</head>

<body>
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../index.html">ZRender</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/zrender">View on GitHub</a>
              <ul class="nav">
                <li><a href="../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Example <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li class="active"><a href="example/demo.html">Demo</a></li>
                    <li><a href="example/animation.html">Animation</a></li>
                    <li><a href="example/chart.html">Chart</a></li>
                    <li><a href="example/colorSeries.html">Color Series</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="example/artist.html">Artist</a></li>
                    <li><a href="example/slice.html">slice</a></li>
                  </ul>
                </li>
                <li class="active"><a href="doc.html">API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/zrender/archive/2.0.8.zip">ZIP (2.0.8)</a></li>
                    <li><a href="https://github.com/ecomfe/zrender/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://echarts.baidu.com" target="_blank">ECharts</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <div class="row">
            <div class="span3">
              <div class="affix accordion" id="accordion">
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-zrender">
                        <a id="nav-head-zrender" href="#zrender">zrender</a>
                      </div>
                    </div>
                    <div id="collapse-zrender" class="accordion-body collapse in">
                      <div class="accordion-inner">
                        <ul class="nav nav-list" id="nav-zrender"></ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-zrender-instance">
                        <a id="nav-head-zrender-instance" href="#zrenderInstance">ZRender</a>
                      </div>
                    </div>
                    <div id="collapse-zrender-instance" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <ul class="nav nav-list" id="nav-zrender-instance"></ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-shape">

                        <a id="nav-head-shape" href="#shape">shape</a>
                      </div>
                    </div>
                    <div id="collapse-shape" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <ul class="nav nav-list" id="nav-shape"></ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-tool">
                        <a id="nav-head-tool" href="#tool">tool</a>
                      </div>
                    </div>
                    <div id="collapse-tool" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <ul class="nav nav-list" id="nav-tool"></ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-animation">
                        <a id="nav-head-animation" href="#animation">animation</a>
                      </div>
                    </div>
                    <div id="collapse-animation" class="accordion-body collapse">
                      <div class="accordion-inner">
                        <ul class="nav nav-list" id="nav-animation"></ul>
                      </div>
                    </div>
                  </div>
              </div><!--/.well -->
            </div><!--/span-->
            <div class="span9">
                <div id="main"></div>
            </div><!--/span-->
        </div><!--/row-->
        <hr>
        <!-- FOOTER -->
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/zrender/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div><!--/.fluid-container-->

    <script src="asset/js/jquery.js"></script>
    <script src="asset/js/bootstrap-transition.js"></script>
    <script src="asset/js/bootstrap-alert.js"></script>
    <script src="asset/js/bootstrap-modal.js"></script>
    <script src="asset/js/bootstrap-dropdown.js"></script>
    <script src="asset/js/bootstrap-scrollspy.js"></script>
    <script src="asset/js/bootstrap-tab.js"></script>
    <script src="asset/js/bootstrap-tooltip.js"></script>
    <script src="asset/js/bootstrap-popover.js"></script>
    <script src="asset/js/bootstrap-button.js"></script>
    <script src="asset/js/bootstrap-collapse.js"></script>
    <script src="asset/js/bootstrap-carousel.js"></script>
    <script src="asset/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        var description = {};
    </script>
    <script src="asset/js/zDocAnimation.js"></script>
    <script src="asset/js/zDocShape.js"></script>
    <script src="asset/js/zDocTool.js"></script>
    <script src="asset/js/zDocZrender.js"></script>
    <script src="asset/js/zDocZrenderInstance.js"></script>
    <script src="asset/js/zrenderDoc.js"></script>

    <script type="text/javascript">
        var conZrIns = document.getElementById('nav-zrender-instance');
        var conShape = document.getElementById('nav-shape');
        var conTool = document.getElementById('nav-tool');
        var conAnimation = document.getElementById('nav-animation');

        function _resize() {
            var viewHeight = document.documentElement.clientHeight;
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
            var offsetHeight = document.body.offsetHeight;
            var maxHeight;
            var footHole = offsetHeight - scrollHeight - viewHeight;
            if (footHole > 60) {
                // 未见footer，60 top、bottom， 40 per one
                maxHeight = viewHeight - 60 - 40 * 5 - 40;
            }
            else {
                // 见footer
                maxHeight = viewHeight - 60 - 40 * 5 - (80 - footHole) - 60;
            }
            if (conZrIns.scrollHeight > maxHeight) {
                conZrIns.style.height = maxHeight + 'px';
            } else {
                conZrIns.style.height = 'auto';
            }
            if (conShape.scrollHeight > maxHeight) {
                conShape.style.height = maxHeight + 'px';
            } else {
                conShape.style.height = 'auto';
            }
            if (conTool.scrollHeight > maxHeight) {
                conTool.style.height = maxHeight + 'px';
            } else {
                conTool.style.height = 'auto';
            }
            if (conAnimation.scrollHeight > maxHeight) {
                conAnimation.style.height = maxHeight + 'px';
            } else {
                conAnimation.style.height = 'auto';
            }
        }
        $('#accordion').on('shown', _resize);
        $(window).on('scroll', _resize);
        $(window).on('resize', _resize);
        var shapeList = $('#nav-shape').children('li');
        for (var i = 0 , l = shapeList.length; i < l; i++) {
            $(shapeList[i]).on('click', _toggle);
        }
        var toolList = $('#nav-tool').children('li');
        for (var i = 0 , l = shapeList.length; i < l; i++) {
            $(toolList[i]).on('click', _toggle);
        }
        var animationList = $('#nav-animation').children('li');
        for (var i = 0 , l = shapeList.length; i < l; i++) {
            $(animationList[i]).on('click', _toggle);
        }

        function _toggle(event){
            if (event.target.className == 'icon-plus') {
                event.target.className = 'icon-minus';
                this.nextSibling.style.height = 'auto';
            } else if (event.target.className == 'icon-minus') {
                event.target.className = 'icon-plus';
                this.nextSibling.style.height = '0px';
            }
        }

        var navZr = document.getElementById('nav-head-zrender');
        var navZrIns = document.getElementById('nav-head-zrender-instance');
        var navShape = document.getElementById('nav-head-shape');
        var navTool = document.getElementById('nav-head-tool');
        var navAnimation = document.getElementById('nav-head-animation');

        navZr.onclick =
        navZrIns.onclick =
        navShape.onclick =
        navTool.onclick =
        navAnimation.onclick = function(e){
            window.location= this.href;
            e = e || window.event;
            if (e.preventDefault) {
                e.preventDefault();
                e.stopPropagation();
            }
            else {
                e.returnValue = false;
            }
        }
        _resize();

    </script>

</body>
</html>